<template>
  <div class="comment">
    <!-- 评论框 -->
    <div class="commendInput" v-if="showInput">
      <el-input
        type="textarea"
        :rows="4"
        placeholder="留下你的评论"
        v-model="commentValue"
        maxlength="150"
        show-word-limit
      >
      </el-input>
      <div class="submitCommentButton">
        <el-button size="mini" round class="submitComment" @click="setCommend"
          >评论</el-button
        >
      </div>
    </div>
    <div class="Comment">
      <slot name="title"></slot>
      <div
        class="commentItem"
        v-for="(item, index) in CommentList"
        :key="index"
      >
        <div class="commentImg">
          <img :src="item.user.avatarUrl" alt="" />
        </div>
        <div class="commentMain">
          <div class="commentUser">
            <div class="commentName">
              {{ item.user.nickname }}
              <span>{{ item.content }}</span>
            </div>
          </div>
          <div class="commentBottom">
            <div class="commentTime">{{ item.timeStr }}</div>
            <div class="commentButtons">
              <div>
                <i class="iconfont icon-dianzan"></i>
                {{ item.likedCount }}
              </div>
              <div>
                <i class="iconfont icon-fenxiang"></i>
              </div>
              <div>
                <i class="iconfont icon-huifu"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Commmend",
  props: {
    // 精彩评论
    CommentList: {
      type: Array,
      default() {
        return [];
      },
    },

    // 是否展示评论框
    showInput: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 评论信息
      commentValue: "",
    };
  },
  methods: {
    // 点击评论按钮事件
    setCommend() {
      this.$emit("setCommendValue", this.commentValue);
    },
  },
};
</script>

<style>
.commendInput {
  width: 100%;
  height: 150px;
  margin: 0 auto;
}
.submitCommentButton {
  width: 100%;
  text-align: right;
  margin: 10px 0;
}
.el-button:hover {
  background-color: #f2f2f2;
}

.el-button {
  transform: scale(0.9) translateX(5%);
}
.Comment {
  width: 100%;
  /* height: 200px; */
}

.commentItem {
  margin-top: 20px;
  /* width: 100%; */
  display: flex;
  border-bottom: 1px solid #ccc;
}
.commentImg {
  width: 40px;
  height: 40px;
  padding-right: 20px;
  border-radius: 50%;
}
.commentImg img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.commentMain {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
}
.commentUser {
  display: flex;
  white-space: wrap;
  width: 100%;
}
.commentName {
  line-height: 20px;
  color: #5a8ab9;
  cursor: pointer;
}
.commentName span {
  color: black;
}
.commentBottom {
  width: 100%;
  margin-top: 10px;
  color: rgb(172, 172, 172);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.commentTime {
  font-size: 14px;
}
.commentButtons {
  display: flex;
  align-items: center;
}
.commentButtons div {
  padding: 0 10px;
}
.newComment {
  margin-top: 60px;
}
</style>